<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../dist/css/details.min.css">
    <!-- <link rel="stylesheet" href="../../dist/css/dingbu.min.min.css"> -->
</head>
<body>
    <header class="top">
        <ul class="left-content">
            <a href="javascript:;">关注</a>
            <a href="javascriot:;" class="left-content-a">下载APP</a>
        </ul>
        <ul class="right-content">
            <li class="right-content-1" id="header" style="width: 150px;">
                <a href="./login.html">登录</a>
                &nbsp;/&nbsp;
                <a href="./signup.html">注册</a>
            </li>
            <li class="right-content-2">
                <span>💝</span>
                <a href="javascript:;">收藏</a>
            </li>
            <li class="right-content-3">
                &#128545
                <a href="javascript:;">购物袋</a>
            </li>
            <li class="right-content-4">
                <a href="javascript:;">公告</a>
            </li>
        </ul>
    </header>
    <nav id="nav">
        <div id="wrapper">
            <div id="logo">
                <img src="../img/logo.png" alt="">
            </div>
            <div id="inner">
                <ul id="inner_nav">
                    <li>
                        <a href="../index.html">首页</a>
                    </li>
                    <li>
                        <a href="">女鞋</a>
                    </li>
                    <li>
                        <a href="">男鞋</a>
                    </li>
                    <li>
                        <a href="">运动</a>
                    </li>
                    <li>
                        <a href="">户外</a>
                    </li>
                    <li>
                        <a href="">儿童</a>
                    </li>
                    <li>
                        <a href="">箱包</a>
                    </li>
                </ul>
                <div id="inp">
                    <input type="text">
                    <span class="icon"></span>
                </div>
            </div>
        </div>
    </nav>
    
    <div id="local">
        <span>您当前位置</span>
        <a href="../index.html">首页&gt;</a>
        <a href="">运动户外&gt;</a>
        <a href="">运动&gt;</a>
        <a href="">运动服&gt;</a>
        <a href="">上装&gt;</a>
        <a href="">卫衣/套头衫&gt;</a>
    </div>
    <main>
        <div id="left-goods">
            <ul id="small-img">
                <li>
                    <div id="img">
                        <img src="../img/small_01.jpg" alt="">
                    </div>
                </li>
                <li><div id="img"><img src="../img/small_02.jpg" alt=""></div></li>
                <li><div id="img"><img src="../img/small_03.jpg" alt=""></div></li>
                <li><div id="img"><img src="../img/small_04.jpg" alt=""></div></li>
                <li><div id="img"><img src="../img/small_05.jpg" alt=""></div></li>
                <li><div id="img"><img src="../img/small_06.jpg" alt=""></div></li>
                <li><div id="img"><img src="../img/small_07.jpg" alt=""></div></li>
            </ul>
            <div id="big-img">
                <span class="mark"></span>
                <span class="float_layer"></span>
                <img src="../img/big1.jpg" alt="" id="img">
            </div>
            <div id="zoom-img">
                <img src="../img/big1.jpg" alt="">
            </div>
        </div>
        <div id="right-details"  data-good-id="sp1">
            <div id="good-logo">
                <img src="../img/blackS-nike.png" alt="">
            </div>
            <div id="good-name">Nike耐克2021年新款女子AS W NY TF COZY CVR UP针织套头衫DD5765-010</div>
            <div id="good-price">
                <span>￥189</span>
                <span>￥469</span>
                <span>不支持使用优惠券</span>
            </div>
            <div id="good-seckill">
                <span id="kill">秒  杀</span>
                <span id="kill-time">还剩6天8小时57分钟46秒</span>
                <span id="kill-more">更多优惠商品>></span>
            </div>
            <div id="line"></div>
            <div id="good-color">
                <span>颜色：</span>
                <span>
                    <img src="../img/small_02.jpg" alt="黑色">
                </span>
                <!-- <span>
                    <img src="../img/small_white.jpg" alt="白色">
                </span> -->
            </div>
            <div id="good-size">
                <span>尺码：</span>
                <a href="javascript:;">
                    <span class="child small" style="position: relative;">S
                        <div class="you" style="background: url(../img/精灵图.jpg)  -179px -49px; width: 12px; height: 12px;position: absolute; right: 0; bottom: 0; display: none;" ></div>
                    </span>
                </a>
                <a href="javascript:;">
                    <span class="child middle" style="position: relative;">M
                        <div class="haha" style="background: url(../img/精灵图.jpg)  -179px -49px; width: 12px; height: 12px;position: absolute; right: 0; bottom: 0;display: none;" ></div>
                    </span>
                </a>
                <a href="javascript:;">
                    <span class="child long" style="position: relative;">L
                        <div class="xixi" style="background: url(../img/精灵图.jpg)  -179px -49px; width: 12px; height: 12px;position: absolute; right: 0; bottom: 0; display: none;" ></div>
                    </span>
                </a>
                <a href="javascript:;">
                    <span class="child xlong" style="position: relative;">XL
                        <div class="sisi" style="background: url(../img/精灵图.jpg)  -179px -49px; width: 12px; height: 12px;position: absolute; right: 0; bottom: 0; display: none;" ></div>
                    </span>
                </a>
                <div id="size-table" style="color:blue;">
                    查看尺码表>>
                </div>
            </div>
            <div id="good-num">
                <span>数量：</span>
                <input type="text" class="icon_inp" value="1" style="display: block;float: left;width: 40px;height: 27px">
                <span class="iconfont">
                    <a href="javascript:;" class="btn_top">
                        <div class="top"></div>
                    </a>
                    <a href="javascript:;" class="btn_bot">
                        <div class="bottom"></div>
                    </a>
                </span>
            </div>
            <div id="pay">
                <a href="javascript:;">
                    <div id="add-cart">加入购物车</div>
                </a>
                <a href="./cart.html">
                    <div id="buy-now">立即购买</div>
                </a>
            </div>
            <div id="share">
                <span></span>
                <span>收藏</span>
                <span></span>
                <span>分享</span>
            </div>
        </div>
        <div id="good-details">
            <div id="info-title">商品信息</div>
            <div id="content">
                <table>
                    <tbody>
                        <tr>
                            <td>色系：黑色</td>
                            <td>版型：标准</td>
                            <td>款式季节：冬季</td>
                            <td>货品来源：招商</td>
                            <td>性别：女子</td>
                        </tr>
                        <p class="line"></p>
                        <tr>
                            <td>运动款式：卫衣</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="size-details">
            <div id="info-name">
                尺码信息
            </div>
            <table>
                <tbody>
                    <tr>
                        <td>尺码</td>
                        <td>XS</td>
                        <td>S</td>
                        <td>M</td>
                        <td>L</td>
                        <td>XL</td>
                    </tr>					
                    <tr>
                        <td>身高</td>
                        <td>147-152</td>
                        <td>152-157</td>
                        <td>157-162</td>
                        <td>162-167</td>
                        <td>167-172</td>
                    </tr>					
                    <tr>
                        <td>胸围</td>
                        <td>74-78</td>
                        <td>78-82</td>
                        <td>82-86</td>
                        <td>86-90</td>
                        <td>90-94</td>
                    </tr>					
                    <tr>
                        <td>腰围</td>
                        <td>56-60</td>
                        <td>60-64</td>
                        <td>64-68</td>
                        <td>68-72</td>
                        <td>72-76</td>
                    </tr>				
                    <tr>
                        <td>上装身高/胸围</td>
                        <td>150/76A	</td>
                        <td>155/80A</td>
                        <td>160/84A</td>
                        <td>165/88A</td>
                        <td>170/92A</td>
                    </tr>				
                    <tr>
                        <td>下装身高/腰围</td>
                        <td>150/58A</td>
                        <td>155/62A</td>
                        <td>160/66A</td>
                        <td>165/70A</td>
                        <td>170/74A</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="good-info">
            <div id="info-name">商品详情</div>
            <div id="inner">
                <img src="../img/good-info_01.jpg" alt="">
                <img src="../img/good-info_02.jpg" alt="">
                <img src="../img/good-info_03.jpg" alt="">
                <img src="../img/good-info_04.jpg" alt="">
                <img src="../img/good-info_05.jpg" alt="">
                <img src="../img/good-info_06.jpg" alt="">
                <img src="../img/good-info_07.jpg" alt="">
                <img src="../img/good-info_08.jpg" alt="">
                <img src="../img/good-info_09.jpg" alt="">
                <img src="../img/good-info_10.jpg" alt="">
                <img src="../img/good-info_11.jpg" alt="">
            </div>
            <div id="brand">
                <p>
                    <img src="../img/nike.jpg" alt="">
                    NIKE（耐克），全球著名体育运动品牌，英文原意指希腊胜利女神。该公司总部位于美国俄勒冈州Beaverton，由比尔·鲍尔曼和校友菲利浦·奈特共同创立。耐克深知，只有运用先进的技术才能产出更好的产品，所以一直以来，投入大量的人力、物力用于新产品的开发和研究，以满足消费者的需求。
                </p>
            </div>
        </div>
        <div id="good-recommend">
            <div id="info-name">商品评价</div>
            <div id="inner">
                <p>该商品暂无点评。</p>
                <p>赶快来发表第一个点评吧！<span class="black">我要写点评</span></p>
            </div>
        </div>
        <!-- <div id="like">
            <div id="like-name">猜你喜欢</div>
        </div> -->
        <!-- <div id="scroll-img">
            <ul>
                <li>
                    <img src="./img/like01.jpg" alt="">
                    <img src="./img/blackS-nike.png" alt="">
                </li>
                <li>
                    <img src="./img/like01.jpg" alt="">
                </li>
                <li>
                    <img src="./img/like01.jpg" alt="">
                </li>
                <li>
                    <img src="./img/like01.jpg" alt="">
                </li>
            </ul>
        </div> -->
    </main>
    <div class="zishiy3" style="float:left;width: 100%;">
        <div class="hengxian"></div>
        <div class="zishiy2">
            <div class="sale">
                <ul>
                    <li>正品保证</li>
                    <li>10天退换货</li>
                    <li>10天调补差价额</li>
                    <li>9：00-21：00在线客服</li>
                </ul>
            </div>
    
            <div class="buttom">
                <div class="buttom-area">
                    <ul>
                        <li>
                            <dl>
                                <dt style="color: white;">
                                    新手帮助
                                <dd class="dd1">交易条款协议</dd>
                                <dd class="dd1">注册新用户</dd>
                                <dd class="dd1">会员积分详情</dd>
                                <dd class="dd1">隐私条款</dd>
                                </dt>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                <dd class="dd2" style="margin-top: 35px;">交易条款协议</dd>
                                <dd class="dd2">注册新用户</dd>
                                <dd class="dd2">会员积分详情</dd>
                                <dd class="dd2">隐私条款</dd>
                                </dt>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                <dd class="dd2" style="margin-top: 35px;">交易条款协议</dd>
                                <dd class="dd2">注册新用户</dd>
                                <dd class="dd2">会员积分详情</dd>
                                <dd class="dd2">隐私条款</dd>
                                </dt>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                <dd class="dd2" style="margin-top: 35px;">交易条款协议</dd>
                                <dd class="dd2">注册新用户</dd>
                                <dd class="dd2">会员积分详情</dd>
                                <dd class="dd2">隐私条款</dd>
                                </dt>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                <dd class="dd2" style="margin-top: 35px;">交易条款协议</dd>
                                <dd class="dd2">注册新用户</dd>
                                <dd class="dd2">会员积分详情</dd>
                                <dd class="dd2">隐私条款</dd>
                                </dt>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                <dd class="dd2" style="margin-top: 35px;">交易条款协议</dd>
                                <dd class="dd2">注册新用户</dd>
                                <dd class="dd2">会员积分详情</dd>
                                <dd class="dd2">隐私条款</dd>
                                </dt>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="buttom-code">
                    <ul class="content-item">
                        <li>
                            <a href="">
                                <img src="../img/beian1.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/beian2.png" alt="">
                            </a>
                        </li>
                    </ul>
                    <ul class="content-code">
                        <li style=" margin-left: 300px;">
                            <a href="">
                                <img src="../img/app.jpg" alt="">
                                <span style="text-align:center ;">扫描手机客户端</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="../img/app.jpg" alt="">
                                <span style="text-align:center ;">扫描手机客户端</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <ul class="butom-link">
                    <li>
                        关于选购
                        &emsp; |
                    </li>
                    <li>
                        关于选购
                        &emsp; |
                    </li>
                    <li>
                        关于选购
                        &emsp;|
                    </li>
                    <li>
                        关于选购
                        &emsp; |
                    </li>
                    <li>
                        关于选购
                        &emsp;|
                    </li>
                    <li>
                        关于选购
                    </li>
                </ul>
                <div style="color: azure; margin-left:30px;">Copyright © 2011-2016 Yougou Technology Co., Ltd.
                    粤ICP备09070608号 深公网安备：4403101910665 粤公网安备 44030502000017号</div>
            </div>
        </div>
    </div>
    <script src="../../src/js/cart-jquery-1.12.4.min.js"></script>
    <script src="../../dist/js/cart-cookie.min.js"></script>
    <script src="../../src/js/details.js"></script>
    <script src="../../dist/js/cooke.min.js"></script>
    <script src="../../dist/js/details1.min.js"></script>
    <script>
        o_box = document.getElementById('inner');
        window.onscroll = function () {
            var scroll_top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop)
            if (scroll_top > 200) {
                o_box.style.position = 'fixed';
                o_box.style.top = '0px';
            } else {
                o_box.style.position = 'relative';
            }
        }
        o_top = document.querySelector('.btn_top');
        o_bot = document.querySelector('.btn_bot');
        o_inp = document.querySelector('.icon_inp');
        o_inp.onblur = function(){
            let re = /^\d$/;
            if(re.test(o_inp.value)){
                o_inp.value = 1;
            }else{
                alert('请输入正确数字');
            }
        }
        o_top.onclick = function(){
            let val = o_inp.value;
            let num = parseInt(val);
            num ++;
            o_inp.value = num;
        }
        o_bot.onclick = function(){
            let val = o_inp.value;
            let num = parseInt(val);
            if(num > 1){
                num --;
            }
            o_inp.value = num;
        }
        // $(function(){
        //     // 购物数量
            
        //     $('.btn_top').click(function(){
        //         var num_num  = $(".icon").val();
        //         var num = parseInt(num_num);
        //         num = num + 1
        //         $(".icon").val(num);
        //     })
        //     $('.btn_bot').click(function(){
        //         var num_num  = $(".icon").val();
        //         if(num > 1){
        //             num = num - 1;
        //         }
        //         $(".icon").val(num);
        //     })
        // })
</script>
</body>
</html>